<template>
  <div class="w-full node-safe-view">
    <ContainerContent
      :loading="loading"
      :show-pagination="false"
      :refresh="false">
      <template #header>
        <div class="flex justify-between items-center w-full">
          <a-radio-group
            v-model="selectRadio"
            type="button"
            class="h-8"
            @change="changeRadio">
            <a-radio value="today" class="min-w-72px text-center">今日</a-radio>
            <a-radio value="yesterday" class="min-w-72px text-center"
              >昨日</a-radio
            >
          </a-radio-group>
          <a-date-picker
            v-model="timeDate"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            style="width: 200px; height: 32px"
            :allow-clear="false"
            :disabled-date="disabledDate"
            :show-now-btn="false"
            class="ml-4"
            @change="handleDateRangePickerChange" />
          <a-select
            v-model="queryData.region_id"
            :style="{ width: '220px', height: '32px' }"
            placeholder="请选择区域"
            class="ml-4"
            @change="changeRegion">
            <a-option value="">全部区域</a-option>
            <a-option
              v-for="item in regionList"
              :key="item.id"
              :value="item.id"
              >{{ item.name }}</a-option
            >
          </a-select>

          <a-select
            v-model="queryData.node_ids"
            :style="{ width: '220px', height: '30px' }"
            placeholder="全部节点      "
            multiple
            allow-clear
            :max-tag-count="1"
            class="ml-4 site_select"
            @popup-visible-change="changeSite"
            @clear="getSiteSummary"
            @remove="getSiteSummary">
            <a-option
              v-for="item in NodeList"
              :key="item.id"
              :value="item.id"
              >{{ item.name }}</a-option
            >
          </a-select>
          <div class="flex-1"></div>
          <a-button
            class="w-[30px]! h-[30px]! shrink-0 mr-[-16px]"
            @click="refreshData()">
            <template #icon>
              <i-icons-refresh size="4" :spin="loading" />
            </template>
          </a-button>

          <!-- <CloudFilterBar
          v-model="params"
          class="flex-1 ml-4"
          :run="run"
          :schemes="filterSchemes"/> -->
        </div>
      </template>
      <div class="item-content">
        <div class="item-content-card" @click="openLog('1')">
          <div class="item-content-card-title">
            自定义规则 ({{
              staCodeNumberFormat(siteOverviewData[1]?.total || 0).unit
            }})
          </div>
          <div class="item-content-card-val">
            {{ staCodeNumberFormat(siteOverviewData[1]?.total || 0).value }}
          </div>
          <a-divider :size="1" type="dashed" :margin="8" />
          <div class="item-content-card-sub">
            <div class="item-content-icon">
              <div class="item-content-icon-img"><i-icons-prevent /></div>
              <div class="item-content-icon-text">
                阻止
                {{
                  staCodeNumberFormat(siteOverviewData[1]?.block_cnt || 0).value
                }}
                {{
                  staCodeNumberFormat(siteOverviewData[1]?.block_cnt || 0).unit
                }}
              </div>
            </div>
            <div class="item-content-icon">
              <div class="item-content-icon-img"><i-icons-observe /></div>
              <div class="item-content-icon-text">
                观察
                {{
                  staCodeNumberFormat(siteOverviewData[1]?.log_cnt || 0).value
                }}
                {{
                  staCodeNumberFormat(siteOverviewData[1]?.log_cnt || 0).unit
                }}
              </div>
            </div>
          </div>
        </div>
        <div class="item-content-card" @click="openLog('2')">
          <div class="item-content-card-title">
            速率限制 ({{
              staCodeNumberFormat(siteOverviewData[2]?.total || 0).unit
            }})
          </div>
          <div class="item-content-card-val">
            {{ staCodeNumberFormat(siteOverviewData[2]?.total || 0).value }}
          </div>

          <a-divider :size="1" type="dashed" :margin="8" />
          <div class="item-content-card-sub">
            <div class="item-content-icon">
              <div class="item-content-icon-img">
                <i-icons-prevent />
              </div>
              <div class="item-content-icon-text">
                阻止
                {{
                  staCodeNumberFormat(siteOverviewData[2]?.block_cnt || 0).value
                }}
                {{
                  staCodeNumberFormat(siteOverviewData[2]?.block_cnt || 0).unit
                }}
              </div>
            </div>
            <div class="item-content-icon">
              <div class="item-content-icon-img"><i-icons-observe /></div>
              <div class="item-content-icon-text">
                观察
                {{
                  staCodeNumberFormat(siteOverviewData[2]?.log_cnt || 0).value
                }}
                {{
                  staCodeNumberFormat(siteOverviewData[2]?.log_cnt || 0).unit
                }}
              </div>
            </div>
          </div>
        </div>
        <div class="item-content-card-null"></div>
      </div>
      <div>
        <div class="overview-chart__header">
          <a-radio-group
            v-model="chartType"
            style="position: relative; top: 30px; z-index: 10"
            type="button">
            <a-radio
              v-for="{ key, label } in typeList"
              :key="key"
              :value="key"
              :name="key"
              class="min-w-72px text-center"
              >{{ label }}</a-radio
            >
          </a-radio-group>
        </div>
        <SecureLineChart
          :type="chartType"
          :time-date="timeDate"
          height="356px"
          :params="queryData"
          :site-id="NodeIdList"
          :math-random="MathRandom" />
      </div>
    </ContainerContent>
  </div>
</template>
<script lang="ts" setup>
import { getApiResolveRegionsListApi } from '@/apis/modules/resolve/area'
import {
  getApiNodeSimpleApi,
  getApiNodeWafInfoApi
} from '@/apis/modules/resolve/statistics'
import ContainerContent from '@/components/ContentContainer.vue'
import useTableColumn from '../column'
const { staCodeNumberFormat } = useTableColumn()
//import { getApiSiteQueryApi } from '@/apis/modules/site/site'
import dayjs from 'dayjs'
import SecureLineChart from '../components/SecureLineChart.vue'
const router = useRouter()
const selectRadio = ref<string | undefined>('today')
const chartType = ref('custom')
const typeList: { label: string; key: string }[] = [
  { label: '自定义规则', key: 'custom' },
  { label: '速率限制', key: 'rate' }
]

const loading = ref(false)
const queryData = reactive({
  region_id: '',
  node_ids: []
})

const timeDate = ref(dayjs().format('YYYY-MM-DD'))

/** 时间变化 */
const daysMap = {
  today: dayjs().format('YYYY-MM-DD'),
  yesterday: dayjs().subtract(1, 'day').format('YYYY-MM-DD')
}

//跳转日志明细
const openLog = (module: string) => {
  localStorage.setItem('safeModule', module)
  router.push({
    name: 'LogDetails'
  })
}

const changeRadio = (val: 'today' | 'yesterday') => {
  if (val === 'today') {
    timeDate.value = daysMap.today
  }
  if (val === 'yesterday') {
    timeDate.value = daysMap.yesterday
  }
}
const handleDateRangePickerChange = (val: string) => {
  selectRadio.value = undefined
  const day = dayjs(val).format('YYYY-MM-DD')
  if (day === daysMap.today) {
    selectRadio.value = 'today'
  }
  if (day === daysMap.yesterday) {
    selectRadio.value = 'yesterday'
  }
}

// 站点数据总量数据
const siteOverviewData = ref<any>({})
const MathRandom = ref(0)
//获取数据总量
const getSiteSummary = () => {
  loading.value = true
  getApiNodeWafInfoApi({
    start_time: dayjs(timeDate.value).unix(),
    end_time: dayjs(timeDate.value).unix() + 86399,
    node_ids:
      queryData.node_ids.length > 0 ? queryData.node_ids : NodeIdList.value
  })
    .then((res) => {
      siteOverviewData.value = res.map
      loading.value = false
    })
    .catch(() => {
      loading.value = false
    })
  MathRandom.value = Math.random() * 1
}
const regionList = ref<any>([])
const NodeList = ref<any>([])
const NodeIdList = ref<any>([])
//获取区域
const getRegions = () => {
  getApiResolveRegionsListApi({}).then((res) => {
    regionList.value = res.list
  })
}

//获取节点
const changeRegion = () => {
  getApiNodeSimpleApi({
    region_id: queryData.region_id
  }).then((res) => {
    NodeList.value = res || []
    queryData.node_ids = []
    NodeIdList.value = NodeList.value.map((item) => {
      return item.id
    })
    getSiteSummary()
  })
}

//站点下拉关闭时查询
const changeSite = (open: boolean) => {
  if (!open) {
    getSiteSummary()
  }
}

onMounted(() => {
  getRegions()
  changeRegion()
})

const disabledDate = (current) => {
  if (current && current > dayjs().endOf('day')) {
    return true
  }
  // 禁用30天之前的日期
  if (current && current < dayjs().subtract(30, 'day').startOf('day')) {
    return true
  }
  return false
}

watch(
  () => timeDate.value,
  (val) => {
    if (val) getSiteSummary()
  }
)

//刷新
const refreshData = () => {
  getSiteSummary()
}
</script>

<style lang="less" scoped>
.node-safe-view {
  .item-content {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    .item-content-card {
      cursor: pointer;
      display: flex;
      padding: 24px;
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;
      flex: 1 0 0;
      border-radius: 8px;
      border: 1px solid #e8ebff;
      background: linear-gradient(94deg, #eff4ff 0%, #f5f6f7 99.92%);
      .item-content-card-title {
        color: var(---color-text-2, #393c40);

        /* 🥇🥇🥇 常规丨Regular 400/正文 -  大 */
        font-family: 'Microsoft YaHei UI';
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 22px; /* 157.143% */
      }
      .item-content-card-val {
        color: var(---color-text-1, #1d2129);
        font-family: 'BebasNeue';
        font-size: 24px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
      }
      .item-content-card-sub {
        display: flex;
        align-items: flex-start;
        gap: 24px;
        align-self: stretch;
        .item-content-icon {
          display: flex;
          align-items: center;
          gap: 4px;
          .item-content-icon-img {
            display: flex;
            align-items: center;
            gap: 4px;
          }
          .item-content-icon-text {
            display: flex;
            align-items: center;
            gap: 4px;
            color: var(---color-text-3, #646a73);

            /* 🥇🥇🥇 常规丨Regular 400/辅助文案、次要文案 */
            font-family: 'Microsoft YaHei UI';
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 20px; /* 166.667% */
          }
        }
      }
    }
    .item-content-card-null {
      display: flex;
      padding: 16px 24px;
      width: 33%;
    }
  }

  :deep(.site_select) {
    height: 32px !important;

    .arco-select-view-inner {
      white-space: nowrap;
      padding-top: 4px !important;

      .arco-tag {
        white-space: nowrap;
      }
      .arco-select-view-input {
        width: 64px !important;
      }
      .arco-select-view-input::placeholder {
        color: #393c40;
        font-size: 14px;
      }
    }
  }
}
</style>
